import React, { useEffect, useMemo } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Table, Button, Switch, Row, Divider , Space, Tag, Select} from 'antd';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import Store from './store';
import NewModal from './newModal';
import { useHistory,Link } from 'react-router-dom';
import './style.less';

import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  MinusCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons';

const Interface_manager = () => {
  const pageStore = React.useContext(Store);
  // console.log(pageStore);
  // 页面加载获取数据
  useEffect(() => {
    pageStore.qryTableDate();

  }, []);

  const handleChange = (value = string) => {
    console.log('selected ${value}');
  };



  const columns = useMemo(
    () => [
      {
        title: '序号',
        dataIndex: 'id',
        ellipsis: true,
        width: 150,
      },
      {
        title: '接口名称',
        dataIndex: 'methodName',
        ellipsis: true,
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 150,
        render: (text, record) => (
          <Row type="flex" align="middle" className="operation">
            <Button type="primary" onClick={() =>  pageStore.delOne(record.methodName) }>
              删除
            </Button>
          </Row>
        ),
      },
    ],
    [pageStore],
  );

  

  return (
    <div className="page-form-demo page-content">
      <Divider dashed />
      <Button type="primary" icon={<PlusOutlined />} onClick={() => pageStore.openModal('new')}>
        新增接口
      </Button>

      <Divider dashed />
      <Tag icon={<CheckCircleOutlined />} color="success">
        接口监控列表
      </Tag>

      <Row style={{ marginTop: 20, backgroundColor: '#fff' }}>
        <Table
          loading={pageStore.loading}
          columns={columns}
          dataSource={toJS(pageStore.tableData)}
          pagination={toJS(pageStore.pagination)}
          rowKey="no"
          scroll={{ y: 450 }}
        />
      </Row>

      <NewModal />
    </div>
  );
};

export default observer(Interface_manager);

